// namespace: "Item" 
<template>
  <li>
    <label>
      <input type="checkbox" v-model="isChecked" />
      <span>{{todo.title}}</span>
    </label>
    <button class="delBtn" @click="deleteItem">删除</button>
  </li>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";

import { Todo } from "../interface/Todos";
export default defineComponent({
  name: "Item",
  props: {
    // 接收父组件传递的数据及方法
    todo: {
      type: Object as () => Todo,
      required: true
    },
    deleteTodo: {
      type: Function,
      required: true
    },
    checkedItem: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    // 当前项的选中态
    const isChecked = computed({
      get() {
        // 返回当前选中态
        return props.todo.isChecked;
      },
      set(val) {
        // 在app同统一修改
        props.checkedItem(props.todo, val);
      }
    });

    // 点击删除 调用app删除方法
    const deleteItem = () => {
      if (window.confirm("确定要删除吗？")) {
        props.deleteTodo(props.todo.id);
      }
    };

    return {
      isChecked,
      deleteItem
    };
  }
});
</script>
<style lang="scss" scoped>
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 10px 0 0;
  height: 35px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-indent: 10px;
  line-height: 35px;
  &:hover {
    background-color: pink;
    color: red;
    button {
      display: inline-block;
    }
  }
  label {
    cursor: pointer;
    input {
      margin-right: 10px;
    }
  }
  button {
    display: none;
  }

  // list-style: none;
  // height: 36px;
  // line-height: 36px;
  // padding: 0 5px;
  // border-bottom: 1px solid #ddd;
  // label {
  //   float: left;
  //   cursor: pointer;
  //   li input {
  //     vertical-align: middle;
  //     margin-right: 6px;
  //     position: relative;
  //     top: -1px;
  //   }
  // }
  // button {
  //   float: right;
  //   display: none;
  //   margin-top: 3px;
  // }
  // &::before {
  //   content: initial;
  // }
  // &:last-child {
  //   border-bottom: none;
  // }
}
</style>